import React, { Component } from 'react';
import PropTypes from "prop-types";

import "./index.css";

export default class Footer extends Component {
	// 对接收的props数据类型限制
	static propTypes={
		todos:PropTypes.array.isRequired,
		checkAllTodo:PropTypes.func.isRequired,
		clearAllDoneTodo:PropTypes.func.isRequired
	};

	// 全选复选框事件监听
	handleCheckAll=(event)=>{
		this.props.checkAllTodo(event.target.checked);
	};
	// 清除所有完成的任务事件监听
	handleClearAllDone=()=>{
		this.props.clearAllDoneTodo();
	}

	render() {
		const {todos} =this.props;
		const doneCount=todos.reduce((prev,curr)=>{
			return prev + (curr.done ? 1 : 0);
		},0);
		const total=todos.length;
		return (
			<div className="todo-footer">
				<label>
					<input type="checkbox" checked={doneCount === total && total !=0 ? true : false} 
						onChange={this.handleCheckAll}
					/>
				</label>
				<span>
					<span>已完成{doneCount}</span> / 全部{total}
				</span>
				<button className="btn btn-danger" onClick={this.handleClearAllDone}>清除已完成任务</button>
			</div>
		)
	}
}
